import React from 'react'
import { Row, Col, Button, Form, Select } from 'antd'
import { getComponent } from '@comm/getComponent'
import Power from '@comm/power'

interface IProps {
    column: any[],
    authKey?: string
    search: (name: string) => void
}

export default function HeaderSearch(props: IProps) {
    const { column, search } = props
    const formRef = React.createRef() as any
    const listSearch = () => {
        const values = formRef.current.getFieldsValue()
        search(values)
    }
    const reset = () => {
        formRef.current.resetFields()
    }
    return (
        <div style={{ marginBottom: "20px" }}>
            <Form onFinish={listSearch} ref={formRef}  layout="inline">
                {column.map((item: any, index: number) => {
                    const Compo = getComponent(item.type)
                    if (item.type === "select") {
                        return (
                            <Form.Item label={item.label} name={item.name} key={item.label}>
                                <Compo {...item.component} style={item.style} key={index}>
                                    {item.option.map((item: any) => {
                                        return (
                                            <Select.Option key={item.value} value={item.key}>{item.value}</Select.Option>
                                        )
                                    })
                                    }
                                </Compo>
                            </Form.Item>
                        )
                    }else {
                        return (
                            <Form.Item label={item.label} name={item.name} key={item.label}>
                                <Compo {...item.component} style={item.style} key={index}></Compo>
                            </Form.Item>
                        )
                    }
                })
                }
                {
                    props.authKey && 
                    <Power authKey={props.authKey}>
                    <Form.Item> <Button type="primary" htmlType="submit" >查询</Button> </Form.Item>
                    </Power>
                }
               <Form.Item> <Button onClick={reset}>重置</Button> </Form.Item>
            </Form>
        </div>
    )
}